<template>
    <div class="purchase-in-page">
        <el-card>
            <div class="header-bar">
                <span class="title">采购入库管理</span>
                <el-input v-model="search.keyword" placeholder="入库单号/备注/产品" size="small"
                    style="width:200px;margin-right:10px;" clearable />
                <el-select v-model="search.status" placeholder="状态" size="small" style="width:120px;margin-right:10px;"
                    clearable>
                    <el-option v-for="s in statusOptions" :key="s.value" :value="s.value" :label="s.label" />
                </el-select>
                <el-button type="primary" size="small" @click="onAdd">新增入库单</el-button>
            </div>
            <el-table :data="filteredList" border style="width:100%;margin-top:8px;">
                <el-table-column prop="inCode" label="入库单号" width="120" />
                <el-table-column prop="orderCode" label="采购订单号" width="120" />
                <el-table-column prop="vendorName" label="供应商" min-width="120" />
                <el-table-column prop="product" label="产品" min-width="120" />
                <el-table-column prop="warehouse" label="仓库" min-width="100" />
                <el-table-column prop="quantity" label="数量" width="80" />
                <el-table-column prop="inDate" label="入库日期" width="110" />
                <el-table-column prop="status" label="状态" width="90">
                    <template #default="{ row }">
                        <el-tag :type="row.status === '已入库' ? 'success' : (row.status === '待入库' ? 'info' : 'warning')"
                            size="small">{{ row.status }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" min-width="120" />
                <el-table-column label="操作" width="190" fixed="right">
                    <template #default="{ row }">
                        <el-button size="small" type="info" link @click="onEdit(row)">编辑</el-button>
                        <el-button size="small" type="danger" link @click="onDelete(row)">删除</el-button>
                        <el-button size="small" type="primary" link v-if="row.status === '待入库'"
                            @click="onIn(row)">入库</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 新增/编辑弹窗 -->
        <el-dialog v-model="editDialog.visible" :title="editDialog.isEdit ? '编辑入库单' : '新增入库单'" width="480px">
            <el-form :model="editDialog.form" label-width="90px">
                <el-form-item label="入库单号">
                    <el-input v-model="editDialog.form.inCode" />
                </el-form-item>
                <el-form-item label="采购订单号">
                    <el-input v-model="editDialog.form.orderCode" />
                </el-form-item>
                <el-form-item label="供应商">
                    <el-select v-model="editDialog.form.vendorName" filterable>
                        <el-option v-for="v in vendorList" :key="v.name" :value="v.name" :label="v.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="产品">
                    <el-input v-model="editDialog.form.product" />
                </el-form-item>
                <el-form-item label="仓库">
                    <el-input v-model="editDialog.form.warehouse" />
                </el-form-item>
                <el-form-item label="数量">
                    <el-input-number v-model="editDialog.form.quantity" :min="1" />
                </el-form-item>
                <el-form-item label="入库日期">
                    <el-date-picker v-model="editDialog.form.inDate" type="date" value-format="YYYY-MM-DD"
                        style="width: 100%;" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="editDialog.form.status">
                        <el-option v-for="s in statusOptions" :key="s.value" :value="s.value" :label="s.label" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="editDialog.form.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="onSaveEdit">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 医药行业供应商列表，用于下拉选择
const vendorList = [
    { name: '国药控股' }, { name: '华润医药' }, { name: '上海医药集团' }, { name: '石药集团' },
    { name: '扬子江药业' }, { name: '恒瑞医药' }, { name: '复星医药' }, { name: '齐鲁制药' },
    { name: '正大天晴' }, { name: '丽珠医药' }, { name: '太极集团' }, { name: '天士力控股' },
    { name: '哈药集团' }, { name: '东阿阿胶' }, { name: '白云山制药' },
]

const statusOptions = [
    { label: '待入库', value: '待入库' },
    { label: '已入库', value: '已入库' },
    { label: '异常', value: '异常' },
]

const search = reactive({ keyword: '', status: '' })

// 15条采购入库单模拟数据
const purchaseInList = ref([
    { inCode: 'IN20240601', orderCode: 'PO20240531', vendorName: '国药控股', product: '阿莫西林原料', warehouse: '一号库', quantity: 1000, inDate: '2024-06-01', status: '已入库', remark: '按时入库' },
    { inCode: 'IN20240602', orderCode: 'PO20240532', vendorName: '华润医药', product: '氯化钠注射液', warehouse: '二号库', quantity: 800, inDate: '2024-06-01', status: '已入库', remark: '无异常' },
    { inCode: 'IN20240603', orderCode: 'PO20240533', vendorName: '上海医药集团', product: '青霉素钠', warehouse: '三号库', quantity: 1200, inDate: '2024-06-02', status: '待入库', remark: '' },
    { inCode: 'IN20240604', orderCode: 'PO20240534', vendorName: '石药集团', product: '维生素C', warehouse: '一号库', quantity: 500, inDate: '2024-06-02', status: '待入库', remark: '' },
    { inCode: 'IN20240605', orderCode: 'PO20240535', vendorName: '扬子江药业', product: '地塞米松', warehouse: '二号库', quantity: 200, inDate: '2024-06-03', status: '已入库', remark: '' },
    { inCode: 'IN20240606', orderCode: 'PO20240536', vendorName: '恒瑞医药', product: '甲硝唑注射液', warehouse: '三号库', quantity: 900, inDate: '2024-06-03', status: '异常', remark: '包装破损' },
    { inCode: 'IN20240607', orderCode: 'PO20240537', vendorName: '复星医药', product: '葡萄糖注射液', warehouse: '一号库', quantity: 750, inDate: '2024-06-03', status: '待入库', remark: '' },
    { inCode: 'IN20240608', orderCode: 'PO20240538', vendorName: '齐鲁制药', product: '头孢曲松钠', warehouse: '二号库', quantity: 680, inDate: '2024-06-04', status: '已入库', remark: '紧急采购' },
    { inCode: 'IN20240609', orderCode: 'PO20240539', vendorName: '正大天晴', product: '左氧氟沙星', warehouse: '三号库', quantity: 530, inDate: '2024-06-04', status: '待入库', remark: '' },
    { inCode: 'IN20240610', orderCode: 'PO20240540', vendorName: '丽珠医药', product: '环磷酰胺', warehouse: '一号库', quantity: 300, inDate: '2024-06-05', status: '已入库', remark: '' },
    { inCode: 'IN20240611', orderCode: 'PO20240541', vendorName: '太极集团', product: '氨苄西林', warehouse: '二号库', quantity: 780, inDate: '2024-06-05', status: '异常', remark: '入库延迟' },
    { inCode: 'IN20240612', orderCode: 'PO20240542', vendorName: '天士力控股', product: '硫酸庆大霉素', warehouse: '三号库', quantity: 650, inDate: '2024-06-05', status: '待入库', remark: '' },
    { inCode: 'IN20240613', orderCode: 'PO20240543', vendorName: '哈药集团', product: '甲氨蝶呤', warehouse: '一号库', quantity: 450, inDate: '2024-06-06', status: '待入库', remark: '' },
    { inCode: 'IN20240614', orderCode: 'PO20240544', vendorName: '东阿阿胶', product: '盐酸多巴胺', warehouse: '二号库', quantity: 390, inDate: '2024-06-06', status: '已入库', remark: '合格' },
    { inCode: 'IN20240615', orderCode: 'PO20240545', vendorName: '白云山制药', product: '阿奇霉素', warehouse: '三号库', quantity: 990, inDate: '2024-06-07', status: '已入库', remark: '' },
])

const filteredList = computed(() => {
    return purchaseInList.value.filter(p =>
        (!search.status || p.status === search.status) &&
        (!search.keyword ||
            p.inCode.includes(search.keyword) ||
            p.orderCode.includes(search.keyword) ||
            p.vendorName.includes(search.keyword) ||
            p.product.includes(search.keyword) ||
            p.remark.includes(search.keyword)
        )
    )
})

// 弹窗
const editDialog = reactive({
    visible: false,
    isEdit: false,
    form: { inCode: '', orderCode: '', vendorName: '', product: '', warehouse: '', quantity: 1, inDate: '', status: '待入库', remark: '' }
})

function onAdd() {
    Object.assign(editDialog.form, { inCode: '', orderCode: '', vendorName: '', product: '', warehouse: '', quantity: 1, inDate: '', status: '待入库', remark: '' })
    editDialog.isEdit = false
    editDialog.visible = true
}
function onEdit(row) {
    Object.assign(editDialog.form, { ...row })
    editDialog.isEdit = true
    editDialog.visible = true
}
function onSaveEdit() {
    if (!editDialog.form.inCode || !editDialog.form.vendorName || !editDialog.form.product) {
        ElMessage.warning('请填写完整信息')
        return
    }
    if (editDialog.isEdit) {
        const idx = purchaseInList.value.findIndex(v => v.inCode === editDialog.form.inCode)
        if (idx !== -1) Object.assign(purchaseInList.value[idx], editDialog.form)
    } else {
        if (purchaseInList.value.some(v => v.inCode === editDialog.form.inCode)) {
            ElMessage.warning('入库单号重复')
            return
        }
        purchaseInList.value.push({ ...editDialog.form })
    }
    editDialog.visible = false
}
function onDelete(row) {
    const idx = purchaseInList.value.findIndex(v => v.inCode === row.inCode)
    if (idx !== -1) purchaseInList.value.splice(idx, 1)
}
function onIn(row) {
    row.status = '已入库'
    ElMessage.success('已完成入库')
}
</script>

<style scoped>
.purchase-in-page {
    padding: 28px 38px 30px 38px;
    min-height: 100vh;
    background: #fff;
}

.header-bar {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    gap: 10px;
}

.header-bar .title {
    font-size: 1.18rem;
    font-weight: 600;
    margin-right: 28px;
}
</style>
